<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<!-- <view class="uni-title">{{$t('demo.table.title')}}</view> -->
				<view class="uni-title">配额管理-普通用户</view>
			</view>
			<view class="uni-group">
				<!-- 输入框 -->
				<input class="uni-search" type="text" v-model="searchVal" @confirm="search"
					:placeholder="$t('common.placeholder.query')" />
				<!-- 搜索按钮 -->
				<button class="uni-button" type="default" size="mini"
					@click="search">{{$t('common.button.search')}}</button>
				<!-- 添加按钮 -->
				<!-- <button class="uni-button" type="primary" size="mini"
					@click="add()">{{$t('common.button.add')}}</button> -->
				<!-- 批量删除按钮 -->
				<!-- <button class="uni-button" type="warn" size="mini"
					@click="delTable">{{$t('common.button.batchDelete')}}</button> -->
			</view>
		</view>
		<view class="uni-container">
			<!-- 表格组件 -->
			<uni-table :loading="loading" border stripe type="selection" :emptyText="$t('common.empty')"
				@selection-change="selectionChange">
				<uni-tr>
					<!-- 表头列  width="150" width="60" width="80" width="204"-->
					<uni-th align="center">用户</uni-th>
					<uni-th align="center">昵称</uni-th>
					<uni-th align="center">头像</uni-th>
					<!-- <uni-th width="150" align="center">姓名</uni-th> -->
					<uni-th align="center">会员时间</uni-th>
					<!-- <uni-th align="center">禁用状态</uni-th> -->
					<uni-th align="center">{{coin}}</uni-th>
					<uni-th align="center">积分</uni-th>
					<uni-th align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item ,index) in tableData" :key="index">
					<!-- 表格数据列 -->
					<uni-td>{{item.username}}</uni-td>
					<uni-td>
						<view class="name">{{item.nickname}}</view>
					</uni-td>
					<uni-td><el-avatar shape="square" :src="item.portrait" /></uni-td>
					<uni-td><uni-dateformat :date="item.memberAt"></uni-dateformat></uni-td>
					<!-- <uni-td>
						<el-switch @change="updateUserState(item)" inline-prompt v-model="item.state" active-text="是"
							inactive-text="否" />
					</uni-td> -->
					<uni-td>{{item.reset?item.reset:0}}</uni-td>
					<uni-td>{{item.balance}}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary"
								@click="editMember(item,'充值')">充值会员</button>
							<!-- 编辑按钮 -->
							<button class="uni-button" size="mini" type="primary" @click="edit(item,'充值')">充值</button>
							<!-- 删除按钮 -->
							<button class="uni-button" size="mini" type="warn" @click="edit(item,'召回')">召回</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<el-dialog v-model="dialogTableVisible" :title="type+'_用户名：'+username" width="800">
				<el-form :model="form">
					<el-form-item label="用户积分: " label-width="140px">
						<view class="">
							{{balance}}
						</view>
					</el-form-item>
					<el-form-item :label="type+'积分: '" label-width="140px">
						<el-input-number v-if="type == '充值'" min="0" v-model="form.balance" />
						<el-input-number v-else min="0" :max="balance" v-model="form.balance" />
					</el-form-item>
					<el-form-item label="总积分: " label-width="140px">
						<view v-if="type == '充值'">
							{{balance+form.balance}}
						</view>
						<view v-else>
							{{balance-form.balance}}
						</view>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogTableVisible = false">{{$t('common.button.cancel')}}</el-button>
						<el-button type="primary" @click="submit(this.type)">
							<!-- Confirm -->
							{{$t('common.button.submit')}}
						</el-button>
					</div>
				</template>
			</el-dialog>
			<el-dialog v-model="dialogVisible" :title="type+'_用户名：'+username" width="800">
				<el-form :model="form">
					<el-form-item label="会员时间: " label-width="140px">
						<uni-dateformat :date="memberAt"></uni-dateformat>
					</el-form-item>
					<el-form-item label="会员等级: " label-width="140px">
						<el-select v-model="form.member" placeholder="Select">
							<el-option v-for="item in member" :key="item.level" :label="item.name"
								:value="item.level" />
						</el-select>
					</el-form-item>

					<el-form-item label="添加时间: " label-width="140px">
						<el-input-number :min="0" :max="24" v-model="form.balance" />/月
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogTableVisible = false">{{$t('common.button.cancel')}}</el-button>
						<el-button type="primary" @click="submitMember(this.type)">
							<!-- Confirm -->
							{{$t('common.button.submit')}}
						</el-button>
					</div>
				</template>
			</el-dialog>
			<view class="uni-pagination-box">
				<!-- 分页组件 -->
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>


<script>
	import {
		addUserBalance,
		reduceUserBalance,
		updateUserState,
		getUserList,
		getMember,
		addUserMember
	} from '@/api/pc';
	import {
		Check,
		Close
	} from '@element-plus/icons-vue'
	// 导出默认模块
	export default {
		// 数据属性
		data() {
			return {
				// 搜索值
				searchVal: '',
				// 表格数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				// 加载状态
				loading: false,
				// ------- 新 ---------
				dialogTableVisible: false,
				dialogVisible: false,
				balance: 0,
				memberAt: '',
				username: '',
				form: {
					balance: 0,
					id: '',
					password: '',
					member: 0,
					username: '',
					discount: ''
				},
				// 召回，充值
				type: '充值',
				member: [],
				options: []
			}
		},
		// 页面加载时的处理函数
		onLoad() {
			// 重置选中项数组
			this.selectedIndexs = []
			// 获取第一页数据
			this.getData(1)
			this.getMember();
		},

		// 方法
		methods: {
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},

			// 多选事件处理函数
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},

			// 批量删除函数
			delTable() {
				this.selectedItems();
			},

			// 分页触发事件处理函数
			change(e) {
				this.getData(e.current)
			},
			edit(e, i) {
				this.form.id = e._id;
				this.username = e.username;
				this.balance = e.balance;
				this.type = i;
				this.dialogTableVisible = true;
			},
			editMember(e, i) {
				this.form.id = e._id;
				this.username = e.username;
				this.form.member = e.member;
				this.balance = 0;
				this.type = i;
				this.dialogVisible = true;
			},
			// 搜索函数
			search() {
				this.getData(1, this.searchVal)
			},
			getMember() {
				getMember({}).then(res => {
					if (res.code == 200) {
						this.member = res.data
					} else {
						this.$message.error(res.msg || '登录失败');
						this.member = []
					}
				})
			},
			submitMember(e) {
				var that = this;
				if (e == '充值') {
					addUserMember(this.form).then(res => {
						if (res.code == 200) {
							that.$message.success(res.msg);
							that.getData(this.pageCurrent)
							that.dialogTableVisible = false;
						} else {
							that.$message.error(res.msg);
						}
					})
				} else {
					reduceUserMember(this.form).then(res => {
						if (res.code == 200) {
							that.$message.success(res.msg);
							that.getData(this.pageCurrent)
							that.dialogTableVisible = false;
						} else {
							that.$message.error(res.msg);
						}
					})
				}

			},
			submit(e) {
				var that = this;
				if (e == '充值') {
					addUserBalance(this.form).then(res => {
						if (res.code == 200) {
							that.$message.success(res.msg);
							that.getData(this.pageCurrent)
							that.dialogTableVisible = false;
						} else {
							that.$message.error(res.msg);
						}
					})
				} else {
					reduceUserBalance(this.form).then(res => {
						if (res.code == 200) {
							that.$message.success(res.msg);
							that.getData(this.pageCurrent)
							that.dialogTableVisible = false;
						} else {
							that.$message.error(res.msg);
						}
					})
				}

			},
			updateUserState(e) {
				var that = this;
				// console.log(e, e.state); 
				updateUserState({
					id: e._id,
					state: e.state
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.msg);
						that.getData(this.pageCurrent)
					} else {
						that.$message.error(res.msg);
						e.state = !e.state;
					}
				})
			},
			// 获取数据函数
			getData(pageCurrent, key = "") {
				this.loading = true
				this.pageCurrent = pageCurrent
				getUserList({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					key: key,
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					} else {
						this.$message.error(res.msg || '登录失败');
						this.tableData = []
						this.total = 0
						this.loading = false
					}
				})
			},
			// 伪request请求函数
			request(options) {
				console.log(options);
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options

				let total = tableData.length

				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})

				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' && success({
						data: data,
						total: total
					})
				}, 500)
			}
		}
	}
</script>


<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	.uni-title_num {
		font-weight: bold;
	}

	/* #endif */
</style>